<template>
  <div class="Tabbar" >
    <ul class="first" v-if="headershow">
      <router-link tag="li" to="index" active-class="active">
        <span class="iconfont icon-jingdong"></span>
        首页
      </router-link>
      <router-link tag="li" to="list" active-class="active">
        <span class="iconfont icon-gengduo-2"></span>分类
      </router-link>
      <router-link tag="li" to="shopcar" active-class="active">
        <span class="iconfont icon-shouye"></span>
        购物车
      </router-link>
      <router-link tag="li" to="me" active-class="active">
        <span class="iconfont icon-touxiang"></span>
        个人中心
      </router-link>
    </ul>

    <ul class="detailTabbar" v-else-if='detailTabbarshow'>
      <router-link tag="li" to="/" class="save">收藏</router-link>
      <li class="shopcar">购物车</li>
     
    </ul>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default { 
    mounted() {
       
    },
    updated() {
        
    },
    computed: {
        ...mapState('header',['headershow','detailTabbarshow']),

    },
};
</script>
<style lang="scss" scoped>
.Tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 9999;
  ul {
    display: flex;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 1.2rem;
    }
    .iconfont {
      font-size: 2.3rem;
    }
    .shopcar {
      background: red;
       font-size: 1.7rem;
    }
    .save {
      background: orange;
       font-size: 1.7rem;

    }
  }
  .first {
    margin: 10px 10px;
  }
  .detailTabbar{
      height: 44px;
      text-align: center;
      line-height: 44px;
      color:white
     
  }
  .active {
    color: red;
  }
}
</style>

